<template>
  <div class="color-vue">
    <div>ceshi1</div>
    <div>ceshi2</div>
    <div class="div3-color">ceshi3</div>
    <span>哈哈哈哈</span>
    <p>+的使用</p>
    <div>
      <p>ppppp1</p>
      <p>pppppp2</p>
      <div>
        <ul>
          <li>
            <span>span3</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ColorVue',
  data () {
    return {
      // span +p表示的是紧跟span后面的p元素
      // div >p表示的是div中的子代p元素
      msg: '这是调试颜色的组件'
    }
  }
}
</script>
<style lang="stylus">
  box-shadow()
    -webkit-box-shadow arguments
    box-shadow arguments
  .color-vue
    div
      color: #008ce3
      font-size: 18px
      &:hover
        color: #c2c2c2
    .div3-color
    span
      color: #333
      font-weight: 900
      &:hover
        color: #888
      box-shadow 1px 2px 5px #eee
    span
      +p
        color: yellow
    div
      >p
        color: purple
    div
      span
        color: hotpink
</style>